// 新增单位弹窗表单
<template>
    <div class="addDialog">
        <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            width="1200px"
            @closed="handleClosed"
            :close-on-press-escape="false"
            :close-on-click-modal="false">
            <el-form ref="form"  :rules="rules" :model="formData">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="公司名称" class="full" prop="clientProviderName">
                            <el-input v-model="formData.clientProviderName" :readonly="type === 'preview'" maxlength="32" placeholder="请输入公司名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="机构代码" class="full" prop="orgCode">
                            <el-input v-model="formData.orgCode" placeholder="请输入机构代码" :readonly="type === 'preview'" maxlength="32"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系人" class="full" prop="providerPrincipal">
                            <el-input v-model="formData.providerPrincipal" maxlength="32" :readonly="type === 'preview'" placeholder="请输入联系人"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系手机" class="full" prop="phoneNum">
                            <el-input v-model.number="formData.phoneNum" maxlength="11" :readonly="type === 'preview'" placeholder="请输入联系人手机号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系人电话" class="full" prop="telephone">
                            <el-input v-model="formData.telephone" maxlength="13" :readonly="type === 'preview'" placeholder="请输入联系电话"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="地址" class="full" prop="address">
                            <el-input v-model="formData.address" :readonly="type === 'preview'" placeholder="请输入地址"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="业务范围" class="full" prop="scopeBusiness">
                            <el-input v-model="formData.scopeBusiness" type="textarea" :readonly="type === 'preview'" maxlength="64" placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注" class="full" prop="remarks">
                            <el-input v-model="formData.remarks" type="textarea" :readonly="type === 'preview'" maxlength="200" placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="album" v-if="dialogVisible">
                    <el-col :span="24">
                        <h4 class="dialogItemTitle">上传附件</h4>
                    </el-col>
                    <el-col :span="24" style="margin-top:10px;">
                        <v-upload
                            type="file"
                            ref="upload"
                            :busId="formData.supplierId"
                            modelType="supplierManage"
                            @onSuccess="onSuccess"
                            v-model="uploadFileList"
                            isShowFileList
                            :isView="type === 'preview'"
                            :autoLoadFiles="false"
                            :canDelete="type === 'edit'"
                        />
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
                <el-button  v-if="type !== 'preview'" type="primary" v-throttle="[save]" :loading="saveLoading">提 交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { changeDepartment } from "@/views/wy-operate/api/repair.js";
    import uploadMedia from '@/components/upload-media';
    import {validatePhone, validateEmail, validatePhoneTwo, validateTelephone, validateIdNo,validateTel} from '~/utils/validate'
    export default {
        name: 'addDepartment',
        components: {
            uploadMedia,
        },
        inject: ['initList'],
        data() {
            return {
                type: 'add',//弹窗类型，默认新增
                //弹窗开关
                dialogVisible: false,
                // 表单项
                formData: {
                    clientProviderName: '',
                    orgCode: '',
                    name: '',
                    phoneNum: '',
                    telephone: '',
                    address: '',
                    scopeBusiness: '',
                    remarks: '',
                    supplierId: ''
                },
                // 校验规则
                rules: {
                    clientProviderName:  [{required: true, message: '公司名称不能为空', trigger: 'blur'}],
                    orgCode:  [{required: true, message: '机构代码不能为空', trigger: 'blur'}],
                    providerPrincipal:  [{required: true, message: '联系人不能为空', trigger: 'blur'}],
                    phoneNum:  [{required: true, message: '联系电话不能为空', trigger: 'blur'},
                        {validator:validatePhone, trigger: "blur"},],
                    telephone: [
                        {required: true, message: '联系人电话不能为空', trigger: 'blur'},
                        {validator:validatePhoneTwo, trigger: "blur"},
                    ],
                    address:  [{required: true, message: '地址不能为空', trigger: 'blur'}],
                    scopeBusiness:  [{required: true, message: '请输入业务范围', trigger: 'blur'}],
                },
                // 保存按钮loading
                saveLoading: false,
                // 上传文件列表
                uploadFileList: [],
            }
        },
        computed: {
            // 弹窗标题计算
            dialogTitle() {
                return {
                    'preview': '查看',
                    'edit': '编辑',
                    'add': '新增'
                }[this.type]
            },
        },
        methods: {
            //开启弹窗
            show({type, data = {}}) {
                if(['preview','edit','approval'].includes(type)) {
                    this.formData = {...this.formData, ...data};
                    this.$nextTick(() => {
                        this.$refs.upload && this.$refs.upload.getFiles(data.supplierId)
                    })
                }
                this.type = type;
                this.dialogVisible = true;
            },
            // 普通提交
            save() {
                if(['edit','add'].includes(this.type)) {
                    this.$refs.form.validate(async (valid) => {
                        if(!valid) return;
                        this.saveLoading = true
                        if(this.uploadFileList.length) {
                            this.$refs.upload.submit('supplierManage',this.formData.supplierId);
                        } else {
                            const res = await changeDepartment(this.formData, this.type)
                            if(res.data.code == 0) {
                                this.$message.success(`${this.dialogTitle}成功!`);
                                this.dialogVisible = false
                                this.initList({clientProviderName: '',current:1})
                            } else {
                                this.$message.console(res.data.msg);
                            }
                            this.saveLoading = false
                        }
                    });
                }
            },
            // 上传文件提交
            async onSuccess(response, file, fileList) {
                let params = this.type == 'add' ? {...this.formData, supplierId: response.data} : this.formData
                const res = await changeDepartment(params, this.type)
                if(res.data.code == 0) {
                    this.dialogVisible = false
                    this.initList({clientProviderName: '',current:1})
                }
                this.saveLoading = false
            },
            // 弹窗关闭初始化
            handleClosed() {
                this.formData = {
                    clientProviderName: '',
                    orgCode: '',
                    name: '',
                    phoneNum: '',
                    telephone: '',
                    address: '',
                    scopeBusiness: '',
                    remarks: '',
                    supplierId: '',
                    mobile: ''
                }
                this.uploadFileList.length = 0
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>


